<template>
  <div class="home" @mousedown="mousedown">
    <h1>Todolist</h1>
    <h2>
      共有任务<span class="text-primary">{{ lists.length }}</span
      >,已完成任务<span class="text-success">{{ finshList.length }}</span>
    </h2>
    <h3>未完成的列表</h3>
    <ul class="list-group">
      <template v-for="(item, index) in lists" :key="index">
        <li
          class="list-group-item d-flex justify-content-between"
          v-if="!item.checked"
        >
          <div class="form-group form-check mb-0">
            <input
              @click="() => (item.checked = !item.checked)"
              type="checkbox"
              class="form-check-input"
              v-model="item.checked"
              :id="'item-' + index"
            />
            <label
              class="form-check-label"
              v-if="!item.isEdit"
              @dblclick="showEdit(item, index)"
              >{{ item.name }}</label
            >
            <label class="form-check-label" :for="'item-' + index" v-else>
              <input type="text" v-model="editValue" ref="myInput" />
            </label>
          </div>
          <button
            type="button"
            class="close"
            aria-label="Close"
            @click="remove(index)"
          >
            <span aria-hidden="true">&times;</span>
          </button>
        </li>
      </template>
    </ul>
    <h3>已完成的列表</h3>
    <ul class="list-group">
      <li
        class="list-group-item"
        v-for="(item, index) in finshList"
        :key="index"
      >
        <div class="form-group form-check">
          <input
            type="checkbox"
            class="form-check-input"
            disabled
            v-model="item.checked"
            :id="'finshed-' + index"
          />
          <label class="form-check-label" :for="'finshed-' + index">{{
            item.name
          }}</label>
        </div>
      </li>
    </ul>
    <h3>添加新的Task</h3>
    <div class="form-group">
      <!-- <label for="add">添加</label> -->
      <input
        type="text"
        v-model="value"
        class="form-control"
        id="add"
        @keyup.enter="add"
        placeholder="添加新的Task"
      />
    </div>
    <button
      type="button"
      class="btn btn-secondary btn-lg btn-block"
      @click="add"
    >
      确定添加
    </button>
  </div>
</template>

<script>
import { ref, reactive, toRefs, computed } from "vue";

export default {
  name: "Home",
  setup() {
    const myInput = ref(null);
    let editIndex = 0;
    //添加任务
    const add = () => {
      state.lists.push({
        name: state.value,
        checked: false,
        isEdit: false,
      });
      state.value = "";
    };
    // 显示编辑输入框
    const showEdit = (item, index) => {
      state.lists[index].isEdit = !state.lists[index].isEdit;
      state.editValue = state.lists[index].name;
      editIndex = index;
      console.log(editIndex);
    };
    // 点击非编辑输入框保存内容
    const mousedown = (e) => {
      if (myInput.value && e.target != myInput.value) {
        state.lists[editIndex] = {
          name: state.editValue,
          checked: false,
          isEdit: false,
        };
      }
    };
    //删除任务
    const remove = (index) => {
      state.lists.splice(index, 1);
    };

    const state = reactive({
      value: "",
      editValue: "",
      lists: [
        {
          name: "1",
          checked: false,
          isEdit: false,
        },
        {
          name: "2",
          checked: false,
          isEdit: false,
        },
        {
          name: "3",
          checked: false,
          isEdit: false,
        },
      ],
      finshList: computed(() =>
        state.lists.filter((item) => item.checked == true)
      ),
    });

    const RefState = toRefs(state);
    return {
      ...RefState,
      add,
      showEdit,
      mousedown,
      myInput,
      remove,
    };
  },
};
</script>
<style scoped>
.home {
  width: 600px;
  padding: 30px;
}
</style>
